<template>
  <div>
    <div class="selectEmissionSourceDictionary" v-show="showType == 1">
      <!-- 标题 -->
      <div class="selectEmissionSourceDictionary-title">已添加排放源</div>
      <el-button @click="showType = 2">添加排放源</el-button>
      <!-- 表格-已添加排放源 -->
      <div class="selectEmissionSourceDictionary-report">
        <normal-table
          :tableData="tableData2"
          :paginationConfig="paginationConfig2"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList2"
          @event="handleEvent2"
          @changePage="changePage2"></normal-table>
      </div>

    </div>

    <div class="selectEmissionSourceDictionary" v-show="showType == 2">
      <!-- 标题 -->
      <div class="selectEmissionSourceDictionary-title">选择排放源</div>


      <!-- 条件筛选 -->
      <div class="-condition">
        <div class="selectEmissionSourceDictionary-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>

      </div>
      <div class="selectEmissionSourceDictionary-condition-btn">
        <el-button @click="initTableData()">查询</el-button>
        <el-button @click="reset()">重置</el-button>
      </div>


      <!-- 表格-核算报告 -->
      <div class="selectEmissionSourceDictionary-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>


    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'selectEmissionSourceDictionary',
  components: {
    NormalTable,
    NormalFormPlus
  },
  mounted() {
    if (this.$route.query.modelId) {
      this.modelId = this.$route.query.modelId
    }
    this.initTableData();
    this.getAccountingModelEmissionByPage();
  },
  data() {
    return {
      showType: 1, // 控制页面的展示形式， 1展示以添加数据，2展示待添加数据
      // 存储当前页面modelId
      modelId: '',
      formModel: {
        facility: null,// 排放设施
        ghgClassification: null,// GHG分类
        isoClassification: null,//	ISO分类
        name: null,// 排放源名称
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '2',
              edit: true,
              type: 'input',
              span: 4,
              model: 'name',
              name: '',
              props: {
                placeholder: "排放源名称",
                width: 150
              }
            },
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 4,
              model: 'facility',
              name: '',
              props: {
                placeholder: "排放设施",
                width: 150
              }
            },
            {
              id: '4',
              edit: true,
              type: 'select',
              span: 4,
              model: 'ghgClassification',
              name: '',
              props: {
                placeholder: "GHG分类",
                options: [
                  {value: '范围一', label: '范围一'},
                  {value: '范围二', label: '范围二'},
                  {value: '范围三', label: '范围三'},
                ]
              }
            },
            {
              id: '5',
              edit: true,
              type: 'select',
              span: 4,
              model: 'isoClassification',
              name: '',
              props: {
                placeholder: "ISO分类",
                options: [
                  {value: '其他间接排放', label: '其他间接排放'},
                  {value: '供应链下游间接排放', label: '供应链下游间接排放'},
                  {value: '外购产品或服务间接排放', label: '外购产品或服务间接排放'},
                  {value: '运输间接排放', label: '运输间接排放'},
                  {value: '能源间接排放', label: '能源间接排放'},
                  {value: '直接排放或清除', label: '直接排放或清除'},
                ]
              }
            }

          ]
        },
      ],
      plus: {},
      tableData: [],
      tableData2: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      paginationConfig2: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList2: [
        {
          name: '删除',
          order: 1,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationList: [
        {
          name: '添加',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "排放源名称",

        },
        // {
        //   prop: "id",
        //   label: "排放源ID"
        // },
        {
          prop: "facility",
          label: "排放设施/活动",

        },
        {
          prop: "ghgClassification",
          label: "GHG分类",
          width: 200
        },
        {
          prop: "isoClassification",
          label: "ISO分类",
          width: 200
        },
        {
          prop: "updater",
          label: "更新人",
        },
        {
          prop: "@updateTime",
          label: "更新时间",
          width: 200
        },
      ],

    }
  },
  methods: {
    // 重置
    reset() {
      this.paginationConfig.page = 1
      this.formModel = {
        facility: null,// 排放设施
        ghgClassification: null,// GHG分类
        isoClassification: null,//	ISO分类
        name: null,// 排放源名称
      }
      this.initTableData()
    },
    // 获取排放源列表
    initTableData() {
      if (this.$MOCK.mock) {
        this.tableData = this.$MOCK.enterprise.accountModelDetail2.data.list
        this.paginationConfig.total = this.$MOCK.enterprise.accountModelDetail2.data.total
        return
      }
      this.$API.enterprise.getEmissionSourceList({
        ...this.formModel,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })
    },
    // 获得模型的排放源分页
    getAccountingModelEmissionByPage() {
      if (this.$MOCK.mock) {
        this.tableData2 = this.$MOCK.enterprise.accountModelDetail.data.list
        this.paginationConfig2.total = this.$MOCK.enterprise.accountModelDetail.data.total
        return
      }
      this.$API.enterprise.getAccountingModelEmissionByPage({
        modelId: this.modelId,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        this.tableData2 = response.data.list
        this.paginationConfig2.total = response.data.total
      })
    },
    // 创建模型的排放源
    createAccountingModelAndEmission(emissionId) {
      this.$API.enterprise.createAccountingModelAndEmission({
        modelId: this.modelId,
        emissionId: emissionId
      }).then(response => {
        this.getAccountingModelEmissionByPage()
      })
    },


    // 添加排放源字典
    add() {
      console.log("adding...")
      this.$router.push("/carbonEmissionManage/addselectEmissionSourceDictionary")
    },
    dao() {
      this.$router.push("/carbonEmissionManage/importEmissionSource")
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.createAccountingModelAndEmission(row.id)
        // this.tableData2 = this.$MOCK.enterprise.accountModelDetail2.data.list
        this.showType = 1
      }
    },
    // 分页点击事件
    changePage() {
      this.initTableData()
    },
    changePage2() {
      this.getAccountingModelEmissionByPage()
    },
    handleEvent2(order, row) {
      if (order === 1) {

      }
    },
  }
}
</script>

<style lang="less" scoped>
.selectEmissionSourceDictionary {

  height: auto;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .selectEmissionSourceDictionary-title {
    font-size: 16px;
    font-weight: bold;
  }

  .selectEmissionSourceDictionary-condition {
    display: flex;

    .selectEmissionSourceDictionary-condition-form {
      flex: 3;
    }

    .selectEmissionSourceDictionary-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .selectEmissionSourceDictionary-report {
    .selectEmissionSourceDictionary-history-title {
      font-size: 14px;
    }
  }
}
</style>
